<template>
    <div>
        <h1>vuex简单入门</h1>
        <p>{{msg}}</p>
        <input type="text" v-model="msg">
        <p>{{num1}}</p>
        <p>{{num2}}</p>
        <p>{{arr}}</p>
        <p>{{user}}</p>
        <p>{{getSum}}</p>
        <hr>
        <!-- <input type="button" value="改变vuex-state变量值" @click="setMsg()"> -->
        <input type="button" value="改变vuex-state变量值" @click="setMsg('梦云妹妹')">
        <input type="text" :value="msg" @input="setMsg($event.target.value)">
        <FixedMenu></FixedMenu>
    </div>
</template>
<script>
import {mapState,mapGetters,mapMutations} from "vuex";
export default {
    // computed:{
    //     msg:{
    //         get(){
    //             return this.$store.state.msg;
    //         },
    //         set(nv){
    //             this.$store.state.msg=nv;
    //         }
    //     },
    //     // msg(){
    //     //     return this.$store.state.msg;
    //     // },
    //     num1(){
    //         return this.$store.state.num1;
    //     },
    //     num2(){
    //         return this.$store.state.num2;
    //     },
    //     arr(){
    //         return this.$store.state.arr;
    //     },
    //     user(){
    //         return this.$store.state.user;
    //     },
    //     getSum(){
    //         return this.$store.getters.getSum;
    //     }
    // },
    // computed:mapState(["msg","num1","num2","arr","user"]),
    computed:{
        ...mapState(["msg","num1","num2","arr","user"]),
        ...mapGetters(["getSum"])
    },
    // methods:{
    //     setMsg(){
    //         // this.$store.state.msg="王梦云";
    //         this.$store.commit("setMsg","梦云");
    //     }
    // },
    methods:{
        ...mapMutations(["setMsg"])
    },
    mounted(){
        // console.log(this);
        // console.log(this.$store);
        // console.log(mapState);
    }
}
</script>